<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业后台管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/font-awesome.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${request.contextPath}/statics/css/all-skins.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/main.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <!--<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
    <![endif]-->
    <style type="text/css">
    .login-page {
        background: url(${request.contextPath}/statics/images/mn.jpg) center center/cover no-repeat;
        background-attachment: fixed;
    }

    .login-box-body {
        opacity: 0.7;
        border-radius: 5px;
    }

    .faceLogin {

    }
    .faceLogin p {
        margin: 0;
        cursor: pointer;
    }

    .faceLogin p:hover {
        text-decoration: underline;
    }
    .media {
        width: 100%;
        height: 350px;
    }
    .faceViedo {
        width: 100%;
        height: 100%;
    }
    .faceCanvas {
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body class="hold-transition login-page">
<div class="login-box" id="rrapp" v-cloak>
    <div class="login-logo" style="margin-left: -28px;width: 421px;">
        <b>企业后台管理系统</b>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg">人脸登录</p>
        <div v-if="errorMsg" class="alert alert-danger alert-dismissible">
            <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
        </div>
        <!-- 人脸区域 -->
        <div class="media">
            <video id="faceVideo" class="faceViedo" autoplay="autoplay"></video>
            <canvas id="faceCanvas" class="faceCanvas"></canvas>
        </div>

        <div class="row">
            <div class="col-xs-8 faceLogin">
                <a href="./login.html">返回账号密码登录</a>
            </div>
            <!-- /.col -->
            <div class="col-xs-4">
                <button type="button" class="btn btn-primary btn-block btn-flat">登录</button>
            </div>
        </div>
    </div>
    <!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/libs/jquery.slimscroll.min.js"></script>
<script src="${request.contextPath}/statics/libs/fastclick.min.js"></script>
<script src="${request.contextPath}/statics/libs/app.js"></script>
<script src="${request.contextPath}/statics/js/modules/gtsdk/gt.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  vm.loginReload();
    var video = $("#faceVideo");
  //获取摄像头(兼容所有浏览器)
  var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
  getUserMedia.call(navigator,{video: true,audio: false},
    function (MediaStream) {
      console.log(MediaStream)
        $("#faceVideo").attr("srcObject",MediaStream);
        // $("#faceVideo").attr("src",MediaStream);
  },function (e) {
    alert("获取摄像头失败",e);
    });
})
var vm = new Vue({
  el: '#rrapp',
  data: {
    errorMsg: ''
  },
  methods: {
    loginReload: function () {
      $('.btn').click(function (e) {
        var context = $("#faceCanvas").getContent("2d");
        context.drawImage(video,0,0,320,350);
        var faceBase = $("#faceCanvas").toDataURL("image/png").split(",")[1];
        console.log(faceBase);
        if (!isBlank(faceBase)){
          console.log("人脸登录认证...",faceBase);
          $.ajax({
            type: "POST",
            url: "sys/login",
            data: {"loginType": 1},
            dataType: "json",
            success: function(result){
              if(result.code == 0){//登录成功
                parent.location.href ='index.html';
              }else{
                vm.error = true;
                vm.errorMsg = result.msg;
              }
            }
          });
        }
      });
    }
  }
})
</script>
</body>
</html>
